<template>
  <FModal ref="refFModal" width="800" @ok="save"
          :header="titleHeader">
    <FPage style="background: white; padding-right: 50px">
      <el-form ref="refForm" status-icon label-width="120px"
               :model="unitGroupData">
        <el-form-item prop="groupName" label="组名" :rules="[required]">
          <el-input v-model="unitGroupData.groupName" placeholder="请输入组名"/>
        </el-form-item>

        <el-form-item prop="groupCode" label="编码" :rules="[required]">
          <el-input v-model="unitGroupData.groupCode" placeholder="请输入编码"/>
        </el-form-item>

        <el-form-item prop="sort" label="排序号" :rules="[required]">
          <el-input-number placeholder="输入排序号" v-model="unitGroupData.sort"/>
        </el-form-item>

        <el-form-item prop="usersId" label="组人员" :rules="[required]">
          <MultiUserSelector v-model:usersId="unitGroupData.usersId"
                             :tabsConfig="userSelectTabsConfig"
                             v-model:usersName="unitGroupData.usersName"/>
        </el-form-item>
      </el-form>
    </FPage>
  </FModal>
</template>
<script setup>
import FModal from '@/components/FModal/index.vue';
import {computed, ref, shallowRef} from 'vue';
import {isEmpty, isNotEmpty, real, required} from '@/utils/CommonUtils';
import FPage from '@/components/layout/FPage.vue';
import MultiUserSelector from '@/components/MultiUserSelector/index.vue';
import {getAction, postAction} from '@/request/BaseRequest';

const refFModal = shallowRef();
const loading = shallowRef(false);
const refForm = shallowRef();
let unitData = undefined;
const unitGroupData = ref({});
const userSelectTabsConfig = shallowRef([
  {name: 'depart'},
  {name: 'position'},
  {name: 'positionLevel'}
]);
const emits = defineEmits(['saved']);

function setData(_unitData, _unitGroupData) {
  unitData = real(_unitData);
  if (isNotEmpty(_unitGroupData)) {
    unitGroupData.value = JSON.parse(JSON.stringify(real(_unitGroupData)));
    loadGroupData();
  } else {
    unitGroupData.value = {};
    loadGroupSorts();
  }
  refFModal.value.open();
}

function loadGroupData() {
  loading.value = true;
  getAction("/sys/group/loadGroupById",
      {id: real(unitGroupData).id}).then(data => {
    loading.value = false;
    if (data.success) {
      unitGroupData.value = data.result;
    }
  });
}

function loadGroupSorts() {
  loading.value = true;
  getAction('/sys/group/loadGroupSorts',
      {unitId: real(unitData).id}).then(data => {
    loading.value = false;
    if (data.success) {
      unitGroupData.value.sort = data.result;
    }
  });
}

const titleHeader = computed(() => {
  if (isEmpty(unitGroupData)
      || isEmpty(real(unitGroupData).id)) {
    return '新建';
  }
  return '编辑';
});

function save() {
  refForm.value.validate((valid, errors) => {
    if (valid) {
      doSave();
    }
  });
}

function doSave() {
  let data = real(unitGroupData);
  data.unitId = real(unitData).id;
  loading.value = true;
  postAction('/sys/group/save', data).then(data => {
    loading.value = false;
    if (data.success) {
      refFModal.value.close();
      emits("saved");
    }
  });
}

defineExpose({
  setData,
});

</script>
<script>
export default {
  name: 'UnitGroupEditorComponent'
};
</script>
<style scoped>

</style>